<template>
  <div class="detill">
    <!-- 导航 -->
    <van-nav-bar
      class="title"
      title="面经详情"
      left-arrow
      @click-left="$router.back()"
      :fixed="true"
    />
    <!-- 标题 -->
    <div class="art" v-if="art">
      <div class="arttitle">{{ art.title }}</div>
      <div class="info">
        <span>{{ art.created_at | dateStyleOne }}</span>
        <div class="flex"></div>
        <span class="read"
          ><i class="iconfont iconicon_liulanliang"></i>{{ art.read }}</span
        >
        <span
          ><i
            class="iconfont iconbtn_dianzan_small_nor"
            :class="{ red: starArtList.includes($route.params.id) }"
          ></i
          >{{ art.star }}</span
        >
      </div>
      <div class="main" v-html="art.content"></div>
    </div>
  </div>
</template>

<script>
import { apiInterviewingParticulars } from '@/api/find.js'
export default {
  data () {
    return {
      art: null,
      starArtList: [] // 文章点赞列表
    }
  },
  async mounted () {
    // 加载效果
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true
    })
    // 请求文章
    const res = await apiInterviewingParticulars(this.$route.params.id)
    this.art = res.data
    // 获取用户点赞列表
    if (this.$store.state.userInfo.starArticles) {
      this.starArtList = this.$store.state.userInfo.starArticles
    }
  }
}
</script>

<style lang="less" scoped>
.detill {
  margin-top: 46px;
  .red {
    color: red !important;
  }
  .title {
    background-color: #ca0131;
    /deep/ .van-icon {
      color: #fff;
    }
    /deep/.van-nav-bar__title {
      color: #fff;
    }
  }
  .art {
    padding: 0 15px;
    .arttitle {
      padding: 20px 0;
      line-height: 25px;
      font-size: 16px;
      font-weight: 800;
    }
    .info {
      display: flex;
      span {
        color: #b4b4bd;
        font-size: 12px;
        i {
          margin-right: 8px;
        }
      }
      .read {
        padding-right: 23px;
      }
      .flex {
        flex: 1;
      }
    }
    .main {
      padding: 30px 0;
      font-size: 16px;
      /deep/img {
        width: 100%;
      }
    }
  }
}
</style>
